<template>
  <dialog-info ref="refPopupDetailDialog">
    <!-- 标题 -->
    <template #DialogTitle>
      <span>{{ currentPopupData.neName }}</span>
    </template>
    <!-- 内容 -->
    <template #DialogContainer>
      <div class="gis_popupdetail_wrap">
        <div class="gis_popupdetail_item">
          <el-form :inline="true" :model="currentPopupData" label-width="200px">
            <el-form-item label="告警ID">
              <el-input v-model="currentPopupData.alarmId" disabled style="width: 635px" />
            </el-form-item>
            <el-form-item label="告警标题">
              <el-input v-model="currentPopupData.alarmTitle" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="所属地市">
              <el-input v-model="currentPopupData.city" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="所属区县">
              <el-input v-model="currentPopupData.county" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="首次发生时间">
              <el-input v-model="currentPopupData.eventTime" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="厂商名称">
              <el-input v-model="currentPopupData.equipmentManufacturerName" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="网络类型">
              <el-input v-model="currentPopupData.networkType" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="经纬度">
              <el-input v-model="currentPopupData.lonlat" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="对业务的影响">
              <el-input v-model="currentPopupData.impact" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="处理建议">
              <el-input v-model="currentPopupData.suggestion" disabled style="width: 200px" />
            </el-form-item>

            <el-form-item label="告警定位信息">
              <el-input type="textarea" v-model="currentPopupData.locateInfo" disabled style="width: 635px" :rows="3" />
            </el-form-item>
            <el-form-item label="告警正文">
              <el-input type="textarea" v-model="currentPopupData.alarmText" disabled style="width: 635px" :rows="11" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </dialog-info>
</template>

<script setup>
import { ref, nextTick } from "vue";
// 组件
import Alarm from './components/Alarm.vue'
import Complain from './components/Complain.vue'
import Health from './components/Health.vue'
import SatisfactionLevel from './components/SatisfactionLevel.vue'
// 工具
import { useRouter /* useRoute */ } from "vue-router";
// api相关 - 工具
import { apiCommon, getDateTimeNowFormate, formatDate } from "@/utils/index.js";
import { queryCellRelatedInfo } from "@/api/gis/gis";
import { disable } from "ol/rotationconstraint";


const router = useRouter();
const refPopupDetailDialog = ref(null);

// 当前气泡弹出框信息
const currentPopupData = ref({});
const positionFix = 3;

let isShowHealth = ref(true);
let activeName = ref("health");

const refHealth = ref(null);
const refComplain = ref(null);
const refSatisfactionLevel = ref(null);
const refAlarm = ref(null);

const insertTime = ref(getDateTimeNowFormate());
const cellRelatedInfo = ref({})

/**
 * 业务
 */
const show = (val) => {
  refPopupDetailDialog.value.show();
  refPopupDetailDialog.value.setDialogWidth('1000px');

  currentPopupData.value = val; // 基本信息数据

  // 处理数据
  currentPopupData.value.eventTime = formatDate(currentPopupData.value.eventTime);
  currentPopupData.value.lonlat = `[${currentPopupData.value.longitude.toFixed(positionFix)}, ${currentPopupData.value.latitude.toFixed(positionFix)}]`
  // console.log("currentPopupData.value", currentPopupData.value);
};

defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
.gis_popupdetail_wrap {
  .gis_popupdetail_item {
    margin-bottom: 20px;

    h3 {
      color: #303133;
      margin-bottom: 10px;
      font-size: 15px;
    }

    .descriptions_wrap {

      width: 100px;

      .long_text {
        background: #f00;
      }
    }
  }
}
</style>
